<template>
    <div class="news-detail">
        <!-- 根据新闻详情有没有image_source的值，来判断顶部要不要显示 -->
        <div class="top-wrapper" v-if="!newsDatas.image_source===false">
            <img class="ximg-demo" :src="newsDatas.image" alt="">
            <span class="top-title">{{newsDatas.title}}</span>
            <span class="image-source">图片：{{newsDatas.image_source}}</span>
        </div>
        <div class="body-wrap" v-html="newsDatas.body"></div>
        <nav-menu :id="this.$route.params.id"></nav-menu>
    </div>
</template>
<script>
import axios from "axios";
import NavMenu from "components/navMenu/navMenu";
export default {
  data() {
    return {
      newsDatas: {}
    };
  },
  created() {
    this.getDetailData();
  },
  watch: {
    $route: "getDetailData"
  },
  methods: {
    getDetailData() {
      let id = this.$route.params.id;
      axios
        .get("api/news/" + id)
        .then(response => {
          response.data.body = response.data.body;
          this.newsDatas = response.data;
          // 本地缓存当前打开的新闻详情
          sessionStorage.setItem('currentNewsDetail', JSON.stringify(this.newsDatas));
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: {
    NavMenu
  }
};
</script>
<style lang="less" scoped>
@import url("http://news-at.zhihu.com/css/news_qa.auto.css");
.news-detail {
  .top-wrapper {
    height: 200px;
    position: relative;
    overflow-y: hidden;
    z-index: 99;
    background: linear-gradient(top, rgb(245, 244, 241), rgb(48, 44, 44) 100%);
    img {
      position: absolute;
      bottom: -75px;
      width: 100%;
    }
    .top-title {
      position: absolute;
      top: 80px;
      padding: 30px 20px;
      line-height: 25px;
      color: #fff;
      font-size: 22px;
    }
    .image-source {
      position: absolute;
      right: 8px;
      bottom: 10px;
      font-size: 12px;
      color: #cccccc;
    }
  }
  .body-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    padding-bottom: 44px;
  }
}
</style>
